<template>
    <div>
        <header>
            <van-icon name="arrow-left" @click="back()"/>
            <input
                    type="text"
                    placeholder="请输入关键词"
                    v-model="value"
                    @input="input()"
                    @keydown.enter="search()"
            />
            <span @click="back()" v-show="sShow" style="color:rgb(241, 240, 240)">取消</span>
            <span v-show="!sShow" @click="search()">搜 索</span>
        </header>

        <main v-show="sShow">
            <p>
                历史记录
                <van-icon name="delete" size="20px" @click="del()"/>
            </p>
            <section style="padding:10px">
                <van-tag
                        v-for="(item, index) in LIST"
                        plain
                        type="primary"
                        size="large"
                        style="margin:5px"
                        @click="sso(item)"
                        :key="index"
                >{{item}}
                </van-tag>
            </section>
        </main>
        <div class="wrap-list" v-show="!sShow">
            <Excellent v-for="li in list"
                       class="list1"
                       :text="li.title"
                       :people="li.sales_num"
                       :periods="li.total_periods"
                       :date="[li.end_play_date,li.start_play_date]"
                       :name="li.teachers_list[0].teacher_name"
                       :img="li.teachers_list[0].teacher_avatar"
                       :price="li.price"
                       :has_buy="li.has_buy"
                       @click="goToxq(li.id)"
                       :key="li.id"/>
        </div>

    </div>
</template>

<script>
    import Excellent from "../../components/home/Excellent";

    export default {
        data() {
            return {
                sShow: true,
                value: "",
                searchShow: false,
                LIST: JSON.parse(localStorage.getItem('ss')) || [],
                wys: []
            };
        },
        components: {
            Excellent
        },
        computed: {
            list: function () {
                return this.$store.state.searchlist.list;
            },
        },
        created() {
            this.$store.commit('listc')
        },
        methods: {
            //返回
            back() {
                window.history.back();
            },
            //监听
            input() {
                if (this.value != "") {
                    this.sShow = false;
                    this.$store.commit('listc')
                } else {
                    this.sShow = true;
                    this.searchShow = false;
                }
            },
            // 搜索
            search() {
                let p = this.LIST.findIndex(item => {
                    return item === this.value
                });

                if (this.LIST.length < 5) {//判断搜索历史数据条数,以作保留条数
                    p === -1 ? this.LIST.splice(4, 1) : this.LIST.splice(p, 1);//搜索历史去重
                    this.LIST.unshift(this.value);//添加历史到首位
                } else {//在这里进行搜索数据去重,会把曾经搜索过的,再搜索排在第一位,将旧的位置历史删除
                    p === -1 ? this.LIST.splice(4, 1) : this.LIST.splice(p, 1);//搜索历史去重
                    this.LIST.unshift(this.value);//添加历史到首位
                }

                localStorage.ss = JSON.stringify(this.LIST);

                this.$store.dispatch("Searchlist", this.value);
                this.sShow = false;
            },
            //删除历史记录
            del() {
                this.LIST = [];
                this.obj();
            },
            sso(data) {
                this.value = data;
                this.search()
            },
            obj() {
                localStorage.ss = JSON.stringify(this.LIST);
            },
        },
    };
</script>
<style lang="scss" scoped>
    .wrap-list{
        margin-top: 120px;
    }

    .van-tag {
        padding: 15px 25px;
        font-size: 20px;
    }

    .van-tag--primary.van-tag--plain {
        color: #000;
        border-radius: 30px;
    }

    .van-tag--plain::before {
        border: none;

    }

    .list1 {
        width: 85%;
        margin: 20px auto;
        padding: 40px 2.5%;
        border-radius: 10px;
    }

    /*body,*/
    /*html,*/
    /** {*/
    /*    background: #fff;*/
    /*}*/

    main {
        margin-top: 120px;
        p {
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 800;
        }
    }

    header {
        z-index: 999;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        display: flex;
        padding: 10px;
        justify-content: space-around;
        align-items: center;
        height: 80px;
        border-bottom: 1px solid #eaeaea;

        span {
            color: #6c757d !important;
        }

        input {
            border-radius: 30px;
            border: none;
            background: rgb(241, 240, 240);
            height: 40px;
            width: 60%;
            padding: 10px;
        }
    }

    .jing {
        width: 90%;
        margin: 20px auto;
        padding: 20px;
        background: #fff;
        border-radius: 10px;

        .jing_img {
            display: flex;
            align-content: center;
            font-size: 25px;
            color: gray;

            img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                margin-right: 20px;
            }

            span {
                margin-top: 10px;
            }
        }

        .pp {
            display: flex;
            justify-content: space-between;
            height: 70px;
            margin-bottom: 0;
            align-items: center;
            font-size: 25px;
            border-top: 0.001px solid #eaeaea;
        }
    }
</style>
